<template>
  <div
    class="pageHeader"
    :style="{'padding': tabHeader?'0px 20px':''}"
  >
    <div class="pageHeader-title">
      <div class="pageHeader-right">
        <slot name="title">
          默认标题
        </slot>
      </div>
    </div>
    <div class="pageHeader-right">
      <slot name="right">
        <el-button>默认按钮</el-button>
      </slot>
    </div>
  </div>
</template>

<script lang='ts'>
import { Component, Vue, Prop } from 'vue-property-decorator'
@Component({})
export default class Page extends Vue {
  @Prop() tabHeader !: boolean
}
</script>

<style lang='scss' scoped>
.pageHeader{
    height: 60px;
    width: 100%;
    background: white;
    border-bottom: 1px solid #ddd;
    display: flex;
    padding: 20px;
    align-items: center;
    @at-root &-title{
      flex: 1;
    }
}
</style>
